<!-- 登录用户洗车的优惠券 -->
<template>
  <view class="my-coupon">
    <!-- 优惠券列表 -->
    <view class="coupon-item" v-for="coupon in couponList" :key="coupon.id">
      <!-- 左侧优惠券信息 -->
      <view class="coupon-discount">
        <CouponDiscount :coupon="coupon">
          <view v-if="coupon.couponType === 0">
            <view class="coupon-name">{{ coupon.couponDiscount * 10 }}折</view>
          </view>
          <view v-else>
            <view class="coupon-name">￥{{ coupon.preferentialMoney }}</view>
            <view class="coupon-desc"> 满{{ coupon.triggerMoney }}元可用 </view>
          </view>
        </CouponDiscount>
      </view>
      <!-- 右侧优惠券限制 -->
      <view class="coupon-price">
        <view class="coupon-limit">
          通用仅限于
          <text style="color: #ff4444">{{ merchantName }}</text>
          使用
        </view>
        <view class="coupon-date">
          <view>2025.04.01 - 2025.04.30</view>
          <view @click="handleUseCoupon(coupon)">立即使用</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import CouponDiscount from "@/components/CouponDiscount.vue";
import { getCouponListApi } from "@/api/WashCarApi";
import { useMerchantStore } from "@/stores/merchantInfo";
import { useCheckedServiceStore } from "@/stores/CheckedService";

//优惠券数据
const couponList = ref<any>([
  {
    userId: 1,
    couponId: 1,
    couponNum: 10, //优惠券数量
    couponType: 0, //优惠券类型 1:满减优惠券 0:满折优惠券
    couponName: "满减优惠券",
    triggerMoney: 100, //触发优惠券的金额
    preferentialMoney: 10, //优惠券的折扣金额
    couponDiscount: 0.9, //优惠券折扣
  },
]);
//TODO 获取当前登录用户id
const userId = ref<number>(18);
//商户名字
const merchantName = ref<string>("xxx");
//定义实际折扣金额
const discountPrice = ref<number>(0);
//获取pinia中存储的要支付的总金额
const totalPrice = ref<number>(0);
//获取pinia中存储的要支付的总金额
const checkedServiceStore = useCheckedServiceStore();
totalPrice.value = checkedServiceStore.getTotalPrice();
console.log("totalPrice", totalPrice.value);

//函数 当用户点击立即使用优惠券时触发
const handleUseCoupon = (coupon: any) => {
  //将优惠券添加到选中的优惠券列表中
  if (coupon.couponType == 0) {
    //使用折扣优惠券
    discountPrice.value =
      totalPrice.value - totalPrice.value * coupon.couponDiscount;
    //如果计算结果有多位小数 保留两个即可
    discountPrice.value = Number(discountPrice.value.toFixed(2));
    console.log("实际折扣金额", discountPrice.value);
    //存储到本地优惠卷优惠的价格
    uni.setStorageSync(
      "couponPrice",
      totalPrice.value - totalPrice.value * coupon.couponDiscount
    );
  } else if (coupon.couponType == 1) {
    //满减优惠
    handleUseFullReductionCoupon(coupon);
  }

  //跳转到确认订单页面，将实际折扣金额以及优惠券id存储到全局变量中
  uni.setStorageSync("discountPrice", discountPrice.value);
  uni.setStorageSync("couponId", coupon.couponId);
  //关闭当前页面 跳转到确认订单页面
  uni.redirectTo({
    url: "/pages/AffirmOrder/index",
  });
};

//函数 用户使用满减优惠券；判断是否达到要求
const handleUseFullReductionCoupon = (coupon: any) => {
  //判断是否达到满减条件
  if (totalPrice.value >= coupon.triggerMoney) {
    //达到满减条件
    discountPrice.value = coupon.preferentialMoney;
    console.log("实际折扣金额", discountPrice.value);
    //存储实际折扣金额
    uni.setStorageSync("couponPrice", discountPrice.value);
  } else {
    //未达到满减条件
    uni.showToast({
      title: "未达到满减条件",
      icon: "none",
    });
  }
};

//函数 获取后端数据
const getCouponList = async () => {
  const res = await getCouponListApi(userId.value);
  console.log("优惠券数据", res);
  if (res.code === 200) {
    couponList.value = res.data;
  }
};

//页面加载时像后端发起请求获取数据
onLoad((options: any) => {
  getCouponList();
  //获取商户id
  const mid = options.mid;
  //根据商户id从pinia中获取商户信息
  const merchantStore = useMerchantStore();
  const merchant = merchantStore.getMerchantInfoById(mid);
  if (merchant) {
    console.log("merchant", merchant);
    merchantName.value = merchant.name;
  }
});
</script>

<style scoped lang="scss">
.my-coupon {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
}

.coupon-name {
  font-size: 40rpx;
  margin-bottom: 20rpx;
}

.coupon-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  gap: 20rpx;
  height: 250rpx;
  .coupon-discount {
    width: 40%;
  }
  .coupon-price {
    flex: 1;
    border-left: 1rpx dashed #1d6fff;
    height: 95%;
    box-sizing: border-box;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .coupon-limit {
      font-size: 30rpx;
      font-weight: bold;
    }
    .coupon-date {
      font-size: 24rpx;
      color: #ec3f2f;
      & view:nth-child(2) {
        margin-top: 10rpx;
        color: #fff;
        font-weight: bold;
        font-size: 35rpx;
        background-color: #1d6fff;
        width: 60%;
        height: 80rpx;
        border-radius: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
